<script setup lang="ts">
import ApexCharts from "apexcharts";
import { onMounted, reactive, useAttrs } from "vue";
import { flowDay } from "@/api/modules/home/index";
// const attr = useAttrs();
// console.log("attr.remoteData", attr.remoteData);
// const series = [
//   attr.remoteData.length ? attr.remoteData[attr.remoteData.length - 1] : 0,
//   attr.remoteData.length ? 100 - attr.remoteData[attr.remoteData.length - 1] : 100
// ];
// const pageData = {
//   series,
//   chartOptions: {
//     chart: {
//       width: 380,
//       type: "pie"
//     },
//     labels: ["当前磁盘使用率", "空闲"],
//     tooltip: {
//       y: {
//         formatter: function (val) {
//           return val + "%";
//         }
//       }
//     },
//     responsive: [
//       {
//         breakpoint: 480,
//         options: {
//           chart: {
//             width: 200
//           },
//           legend: {
//             position: "bottom"
//           }
//         }
//       }
//     ]
//   }
// };
const pageData = reactive({
  series: [],
  chartOptions: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false
      },
      toolbar: {
        show: false,
      },
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: "straight"
    },
    colors:["#a30c0c"],
    title: {
      text: "",
      align: "left"
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5
      }
    },
    xaxis: {
      categories: []
    }
  }
});
onMounted(async () => {
  const res = await flowDay();
  pageData.series = [
    {
      name: "",
      data: res.data.y
    }
  ];
  pageData.chartOptions.xaxis.categories = res.data.x;
});
</script>
<template>
  <div>
    <h3 style="margin: 0px">流量</h3>
    <div style="height: 350px">
      <apexchart
        width="100%"
        height="350px"
        v-if="pageData.series?.length"
        type="line"
        :options="pageData.chartOptions"
        :series="pageData.series"
      ></apexchart>
    </div>
  </div>
</template>

<style scoped></style>
